{% extends 'base.html' %}
{% block title %}Namespace{% endblock %}
{% block cus_style %}
{% endblock %}
{% block layeropen %}
    <div id="create">
        <form action="" class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 16px;margin-top: 8px">名称：</label>
                <div class="layui-input-block">
                  <input type="text" id="cname" name="name" required  lay-verify="required" placeholder="请输入名称" lay-reqtext="名称是必填项" autocomplete="off" class="layui-input" style="color: black;float: left;background: white;width: 160px;height: 30px;margin-top: 10px;margin-bottom: 10px">
                    <br><br>
                  <button class="layui-btn" lay-submit lay-filter="nsCreate">立即提交</button>
                </div>
              </div>
        </form>
    </div>
{% endblock %}
{% block nav-itemed-3 %}layui-nav-itemed{% endblock %}
{% block nav-itemed-3-2 %}layui-this{% endblock %}
{% block context %}
<span class="layui-breadcrumb" lay-separator="-">
    <a href="{% url 'index' %}">首页</a>
    <a href="">Kubernetes</a>
    <a href="{% url 'namespaces' %}">Namespace</a>
    <!-- <a><cite>仪表盘</cite></a> -->
</span>
<hr class="layui-border-green">
<hr>

<div class="layui-card">
    <div class="layui-card-header"><span style="color: #009f95;font-weight: bold">Namespaces</span></div>
    <div class="layui-card-body">
        {% csrf_token %}
        <div class="layui-row">
            <div class="layui-col-md12">
                <!--  头部工具栏，左侧 -->
                <script type="text/html" id="toolBar">
                    <div class="layui-btn-container">
                        <button class="layui-btn" id="createBtn" style="float: left;margin-left: 5px;margin-top: 2px">创建</button>
                        <input type="text" id="nsName" lay-verify="title" placeholder="请输入名称" class="layui-input" style="width: 170px;height: 35px;font-size: 15px;color: black;float: left;background: white;margin-top: 7px">
                        <button class="layui-btn" id="searchBtn" style="float: left;margin-left: 5px;margin-top: 2px">搜索</button>
                    </div>
                </script>
            </div>
            <div class="layui-col-md12">
                    <table id="tt" lay-filter="tt"></table>
                    <!--  行工具 -->
                    <script type="text/html" id="bar">
                      <a class="layui-btn layui-btn-xs" lay-event="yaml">YAML</a>
                      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block custom_js %}
<script>
layui.use(['table','form'], function(){
var table = layui.table;
var form = layui.form;
$ = layui.jquery;
table.render({
    elem: '#tt' // 选择table元素
    ,url: '{% url 'ns_tabledata' %}' //数据接口
    ,toolbar: '#toolBar' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print']
    ,page: true //开启分页
    ,cols: [[ //表头
      {type: 'checkbox'}
      ,{field: 'name', title: '名称', sort: true, width: 280}
      ,{field: 'labels', title: '标签', templet: labelformat}
      ,{field: 'create_time', title: '创建时间', width: 160}
      ,{fixed: 'right', title:'操作', toolbar: '#bar', width:140}
    ]]
    ,id: 'TT'
    , done: function (res, curr,count) { //修改表头样式
            $('layui-table[lay-even]tr:nth-child(even)').css({ 'background-color': '#F0FFFF' });
            $('th').css({ 'background-color':'#F0FFFF', 'color': 'black', 'font-weight': '800', 'font-size': '14px', 'line-height':'10px' });
            }
});
function labelformat(d) {
    var labels = d.labels;
    var result = "";
    for (k in labels) {
        result += '<span style="border: #B0E0E6 solid 2px;border-radius: 5px">' + k + ": " + labels[k] + '</span><br>'
    }
    return result
}


layui.use('table', function () {
  //搜索框
  $(document).on('click','#searchBtn', function () {
      var input_val = $('#nsName').val();
      //console.log(input_val);
      table.reload('TT', {
          where: {   //设定异步数据接口的额外参数，任意设置 传{key: input_val}
              key: input_val
          },
          page: {
              curr: 1  //重新从第 1 页开始
          }
      });
      $('#nsName').val(input_val); //将输入的内容回显的输入框中
  });
  //创建资源
  $(document).on('click','#createBtn',function () {
      layer.open({
          skin: 'layui-layer-molv',
          area: '300px',
          shadeClose: true,
          type: 1,
          title: '创建资源',
          content: $('#create'),
          success: function (layero, index) {
              form.on('submit(nsCreate)', function(data){
                data = data.field;
                var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    type: "POST",
                    url: "{% url 'ns_tabledata' %}",
                    data: data,
                    headers: {'X-CSRFToken': csrf_token},
                    success: function (result) {
                        if (result.code === 0){
                            layer.msg(result.msg, {icon: 6});
                            setTimeout(function () {
                                location.reload();
                            },2000)
                        } else {
                            layer.msg(result.msg, {icon: 5});
                        }
                    },
                    error: function () {
                        layer.msg("服务端接口异常！", {icon: 5})
                    },
                });
              /*layer.open中提交form表单，提交后会直接返回parent页面并刷新，无法弹出layer.msg
              关闭return返回，可以使layer.msg弹出。关闭return后，需要手动关闭open层，及清除输入框内容
              并使用setTimeout方法延迟2s然后刷新页面*/
              layer.close(index);  //关闭layer.open层
              $('#cname').val(""); //清除输入框的内容
              return false;  //关闭form.on方法的return
              });
          },
          error: function () {
                layer.msg("服务端接口异常！", {icon: 5})
          }
      })
  });

});



// 行工具事件
table.on('tool(tt)', function(obj){
    var data = obj.data; //obj.data获取当前行数据
    //console.log(obj);
    if(obj.event === 'del'){
      layer.confirm('确认要删除吗', {icon: 3, title:'提示'}, function(index){
          var del_name = {'name': data.name}; //获取name
          //console.log(del_name);
          var csrf_token = $("[name='csrfmiddlewaretoken']").val(); //获取csrf_token
          var loading = layer.load(0, {
                shade: false,
                time: 3*1000
          });
          $.ajax({
              type: "DELETE",
              url: "{% url 'ns_tabledata' %}",
              data: del_name,
              headers: {'X-CSRFToken': csrf_token},  // 放到请求头，django也会验证这字段
              success: function (result) {
                  if (result.code === 0) {
                      obj.del();  // 临时删除当前页面记录
                      layer.msg(result.msg, {icon: 6,time: 2000});  // icon 6 微笑，time弹出时间，默认3秒，单位毫秒
                      setTimeout(function () {
                        location.reload();
                      },1000)
                  } else {
                      layer.msg(result.msg, {icon: 5})  // icon 5 哭泣
                  }
              },
              error: function () {
                  layer.msg("服务端接口异常！")
              }
          });
        layer.close(index); // 关闭layer层
      });
    } else if (obj.event === 'yaml') {
        //layer.msg("namespace暂不支持编辑");
        var name = data.name;
        layer.open({
            type: 2,
            title: 'YAML',
            area: ['40%', '80%'],
            /* layer.open type:2 弹出editor.html页面
            首先将res_type、namespace、name传给 view.editor
            view.editor接收参数处理成字典然后渲染到editor.html页面
            editor.html页面接收参数 然后将参数通过AJAX传给view.export_res_yaml
            view.export_res_yaml接收参数，通过k8s查询信息，然后转换为yaml格式返回 */
            content: '{% url "editor" %}?res_type=namespace' + '&name=' + name + '&namespace=default'
        })
    }
});

});
</script>
{% endblock %}